import React from 'react'
import './index.css'
import { SearchBar,PickerView } from 'antd-mobile';

const province = [
    {
      label: '北京',
      value: '01',
      children: [
        {
          label: '东城区',
          value: '01-1',
        },
        {
          label: '西城区',
          value: '01-2',
        },
        {
          label: '崇文区',
          value: '01-3',
        },
        {
          label: '宣武区',
          value: '01-4',
        },
      ],
    },
    {
      label: '浙江',
      value: '02',
      children: [
        {
          label: '杭州',
          value: '02-1',
          children: [
            {
              label: '西湖区',
              value: '02-1-1',
            },
            {
              label: '上城区',
              value: '02-1-2',
            },
            {
              label: '江干区',
              value: '02-1-3',
            },
            {
              label: '下城区',
              value: '02-1-4',
            },
          ],
        },
        {
          label: '宁波',
          value: '02-2',
          children: [
            {
              label: 'xx区',
              value: '02-2-1',
            },
            {
              label: 'yy区',
              value: '02-2-2',
            },
          ],
        },
        {
          label: '温州',
          value: '02-3',
        },
        {
          label: '嘉兴',
          value: '02-4',
        },
        {
          label: '湖州',
          value: '02-5',
        },
        {
          label: '绍兴',
          value: '02-6',
        },
      ],
    },
  ];
  
export default class HouseList extends React.Component {
    state = {
        value: null,
    }
    
    onChange = (value) => {
      console.log(value);
      this.setState({
        value,
      });
    }
    onScrollChange = (value) => {
      console.log(value);
    }

    render(){
        return (
            <div className="houseList">
                <div className="header">
                    <i className="iconfont icon-back" onClick={() => this.props.history.go(-1)}/>
                    <div className="searchBar">
                        <SearchBar placeholder="请输入小区或地址" ref={ref => this.autoFocusInst = ref} />
                    </div>
                    <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
                </div>
                <div className="houseListSelect">
                    <div>区域 <i>▼</i></div>
                    <div>方式 <i>▼</i></div>
                    <div>租金 <i>▼</i></div>
                    <div>筛选 <i>▼</i></div>
                </div>

                <div>
                    <PickerView
                      cascade
                      data={province}
                      value={['02', '02-1', '02-1-1']}
                    />
                    <div className="btn">
                        <div className="close">取消</div>
                        <div className="ok">确定</div>
                    </div>
                </div>

                <div className="detailHouse">
                    <div className="imgHouse"><img src="https://fc1tn.baidu.com/it/u=2076335997,1095783596&fm=202&src=780&ernie&mola=new&crop=v1" /></div>
                    <div className="msgHouse">
                        <h3>整租·精装修·wifi</h3>
                        <p className="faceHouse">一室一厅一卫生/78/南|北/奥体中心</p>
                        <p className="locationHouse">近地铁</p>
                        <p className="moneyHouse">1100元/月</p>
                    </div>
                </div>
            </div>
        )
    }
}